<template>
	<view class="equipmentPro">
		<!-- 设备详情 -->
		<navBar><template #title>使用情况</template></navBar>
		<!-- 订单号 -->
		<view class="secureCase">
			<!-- 订单托管 -->
			<OrderEscrow class="bg">
				<template v-slot:title>{{name}}</template>
			</OrderEscrow>
			<view class="record">
				<view class="title">
					<text class="left">交易记录</text>
					<!-- <text class="right">剩余{{num}}张</text> -->
				</view>
				<view class="dateList">
					<view class='item' v-for="item in equipmentList">
						<view class="day">
							{{item.time}}
						</view>
						<view class="equipment">
							<view class="equipmentInfo" v-for='xiaofei in item.children'>
								<view>{{xiaofei.cTime}}</view>
								<view>{{xiaofei.type}}</view>
								<view class="num"
									:style="{color:xiaofei.num.charAt(0) === '-' ?'#00CEB7':(xiaofei.num.charAt(0) === '+' ? '#F7B500':'#ffffff')}">
									{{xiaofei.num}}<text
										v-if="xiaofei.num.charAt(0) !== '-' && xiaofei.num.charAt(0) !== '+'">台</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<div class="trusteeship">
				<van-button type="primary" color="#00D0B9">赠送好友</van-button>
				<van-button type="primary" color="#4E47FF">立即托管</van-button>
			</div>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import navBar from '../../components/mine/navBar/index'
	import OrderEscrow from '../../components/mine/OrderEscrow/index'
	import { useStore } from 'vuex'
	import { ref } from 'vue'
	// import { onLoad } from '@dcloudio/uni-app';
	// 接受上一页页面的id
	// const parmes = ref(null);
	const name = ref('设备兑换券')

	// 剩余张数
	// const num = ref(11)
	const store = useStore()
	const { equipmentList } = store.state

	/**
	 * 获取上页id
	*/
	// onLoad((options) => {
	// 	parmes.value = options.id
	// })
	// watch(parmes, (newVal, oldVal) => {
	// 	if (newVal === '1') {
	// 		name.value = '托管中心'
	// 		console.log(1212)
	// 	} else if (newVal === '2') {
	// 		name.value = '自动托管'
	// 	} else {
	// 		name.value = '设备托管劵'
	// 	}
	// })
</script>

<style lang="scss" scoped>
	.bg {
		background-image: url('../../static/logo.png');
	}

	.equipmentPro {
		color: white;

		.record {
			margin-top: 32px;
			border-radius: 32px;
			background: #2A2B2E;
			padding: 30px;
			box-sizing: border-box;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30px;
				line-height: 44px;
				font-size: 30px;

				.right {
					font-size: 24px;
					color: #00D0B9;
				}
			}

			.dateList {
				font-size: 24px;

				.item {
					display: flex;

					.day {
						padding-bottom: 10px;
					}

					.equipment {
						display: flex;
						flex-wrap: wrap;
						width: 80%;

						.equipmentInfo {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							margin-left: 4%;

							>uni-view {
								width: 100px;
								text-align: center;
								margin-bottom: 30px;
							}

							.num {
								text-align: right;
							}
						}
					}
				}
			}
		}

		.trusteeship {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			height: 88px;
			margin: 40px auto;
			// background: #4E47FF;
			border-radius: 16px;
			line-height: 88px;
			text-align: center;
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;

			.van-button {
				width: 327px;
				height: 100%;
				border-radius: 16px;
			}
		}
	}
</style>